<template>
  <div class="roles-container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card">
      <div style="margin-top: 15px;">
        <el-button type="primary">添加角色</el-button>
        <!-- 表格 -->
        <el-table :data="tableData" border style="width: 100%;margin:20px 0">
          <el-table-column type="expand">
            <template slot-scope="scoped">
              <div
                v-for="(item,index) in scoped.row.children"
                :key="index"
                style="border-bottom:1px  solid  #ccc"
              >
                <!-- 第一级 -->
                <el-row>
                  <el-col :span="8">
                    <el-tag closable>{{item.authName}}</el-tag>
                    <span class="el-icon-caret-right"></span>
                  </el-col>
                  <el-col :span="16">
                    <!-- 第二级 -->
                    <div v-for="(item1,index1) in item.children" :key="index1">
                      <el-row>
                        <el-col :span="8">
                          <el-tag type="warning" closable>{{item1.authName}}</el-tag>
                          <span class="el-icon-caret-right"></span>
                        </el-col>
                        <!-- 第三级 -->
                        <el-col :span="16">
                          <el-tag
                            style="margin:5px;"
                            type="danger"
                            closable　v-for="(item2,index2) in item1.children"
                            :key="index2"
                          >{{item2.authName}}</el-tag>
                        </el-col>
                      </el-row>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </template>
          </el-table-column>
          <el-table-column type="index" width="50" label="#"></el-table-column>
          <el-table-column prop="roleName" label="角色名称" width="180"></el-table-column>
          <el-table-column prop="roleDesc" label="角色描述" width="180"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scoped">
              <el-button size="mini" type="primary" icon="el-icon-search">编辑</el-button>
              <el-button size="mini" type="info" icon="el-icon-search">删除</el-button>
              <el-button size="mini" type="warning" icon="el-icon-search" @click="showPower(scoped.row)">分配权限</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-tree
        ref="tree"
        :data="powerData"
        show-checkbox
        node-key="id"
        :default-expanded-keys="powerArr"
        :default-checked-keys="powerArr"
        :props="defaultProps"
      ></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRightsDialog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
           
<script>
import { rolesAll_api, rightsAll_api,rolesPower_api } from "../../api/index.js";
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      powerData: [],
      powerArr: [],
      defaultProps: {
        children: "children",
        label: "authName",
      },
      roleParams:{
        roleId:'',
        rids:''
      }
    };
  },
  created() {
    this.getRoles();
  },
  methods: {
    async getRoles() {
      const { data: res } = await rolesAll_api();
      this.tableData = res.data;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    async showPower(row) {
      this.roleParams.roleId = row.id
      this.powerArr = [];
      const { data: res } = await rightsAll_api("tree");
      this.powerData = res.data;
      this.digui(row, this.powerArr);
      this.dialogVisible = true;
    },
    digui(row, arr) {
      if (!row.children) {
        return arr.push(row.id);
      }
      row.children.forEach((item) => {
        this.digui(item, arr);
      });
    },
    async addRightsDialog(){
       var  keys=[
        ...this.$refs.tree.getCheckedKeys(),
        ...this.$refs.tree.getHalfCheckedKeys()
      ]
      this.roleParams.rids=keys.join()

      const {data:res} = await rolesPower_api(this.roleParams)

      this.getRoles()
      this.dialogVisible = false;
    }
  },
};
</script>
<style scoped lang='less'>
.roles-container {
  .el-breadcrumb {
    margin-bottom: 20px;
  }
  .el-row {
    border-top: 1px solid #ccc;
    padding: 5px 0;
    align-items: center;
    display: flex;
    &:nth-child(1) {
      border-top: 0px solid #000;
    }
  }
}
</style>